<template>
  <div class="account">
    <!-- 顶部栏 -->
    <van-nav-bar title="个人资料" left-text="返回" left-arrow @click-left="onClickLeft" />
    <BgBox>
      <van-cell-group>
        <div class="clearfix tou">
          <van-cell title="头像" class="fl">
            <div class="touImg fr">
              <img :src="this.myselfInfo.userImg" alt="" />
              <van-uploader class="upload-box" :after-read="updateAvatar" />
            </div>
          </van-cell>
        </div>
        <van-cell v-for="(item,i) in listData " :key="i" :title="item.title" :value="item.content" />
        <van-field label="昵称" placeholder="输入框内容右对齐" input-align="right" v-model="myselfInfo.nickName" @blur="updateNickName()" maxlength="10" />
        <van-field v-model="myselfInfo.desc" label="简介" :placeholder="`${this.myselfInfo.desc?this.myselfInfo.desc:'这个家伙很懒，没有留下任何东西~'}`" label-align="top" input-align="right" @blur="updateDesc" />
      </van-cell-group>
    </BgBox>
  </div>

</template>

<script>
import '@/assets/less/account.less'
import BgBox from '@/components/bgbox.vue'
import request from '@/utils/reques'
import qs from 'qs'
export default {
  name: 'Account',
  created() {
    this.getInfo()
  },
  data() {
    return {
      myselfInfo: {
        nickName: '',
        desc: '',
        phone: '',
        userId: '',
        userImg: ''
      },
      listData: []
    }
  },
  components: {
    BgBox
  },
  methods: {
    async updateAvatar(file) {
      // 'jpg',
      let type = ['jpg', 'png', 'gif', 'jpeg', 'webp']
      let size = 1
      let fileType = file.file.type.split('/')[1]
      if (type.indexOf(fileType) === -1) {
        this.$toast('文件类型只支持${type.join(', ')}')
        return
      }
      // 判断文件大小
      let fileSize = file.file.size / 1024 / 1024
      if (fileSize > size) {
        this.$toast('文件大小不能超过${size}MB')
        return
      }

      // 处理base64标记
      let base64 = file.content.replace(/^data:image\/[A-Za-z]+;base64,/, '')

      let tokenString = localStorage.getItem('token')

      if (!tokenString) {
        this.$toast('请先登录~')
        return this.$router.push({ name: 'Login' })
      }

      this.$toast.loading({
        message: '获取信息中',
        forbidClick: true,
        duration: 0
      })
      try {
        const { data: res } = await request.post('/updateAvatar', qs.stringify({ appkey: this.appkey, tokenString, imgType: fileType, serverBase64Img: base64 }))
        // console.log(res)
        this.$toast.clear()
        if (res.code == 'H001') {
          this.myselfInfo.userImg = res.userImg
        } else if (res.code == 700) {
          //  token无效，跳到登录页面
          this.$router.push({ name: 'Login' })
        } else {
          this.$toast(res.msg)
        }
      } catch (error) {
        this.$toast.clear()
      }
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    async getInfo() {
      let token = localStorage.getItem('token')
      const { data: res } = await request.get('/findAccountInfo', {
        params: {
          appkey: this.appkey,
          tokenString: token
        }
      })
      if (res.code == 'B001') {
        // 赋值
        this.myselfInfo = res.result[0]
        let listData = [
          { title: '用户名id', content: this.myselfInfo.userId },
          { title: '手机号', content: this.myselfInfo.phone }
        ]
        this.listData = listData
        // console.log(this.myselfInfo)
      }
    },
    // 修改昵称
    async updateNickName() {
      let token = localStorage.getItem('token')
      const { data: res } = await request.post(
        '/updateNickName',
        qs.stringify({
          appkey: this.appkey,
          tokenString: token,
          nickName: this.myselfInfo.nickName
        })
      )
      // console.log(res)
      if (res.code == 700) {
        this.$router.push({ name: 'Login' })
      } else if (this.myselfInfo.nickName == '') {
        this.$toast('昵称不能为空')
      } else if (res.code == 'C001') {
        this.$toast('修改昵称成功')
      }
    },
    // 修改简介
    async updateDesc() {
      let token = localStorage.getItem('token')
      const { data: res } = await request.post(
        '/updateDesc',
        qs.stringify({
          appkey: this.appkey,
          tokenString: token,
          desc: this.myselfInfo.desc
        })
      )
      // console.log(res)
      if (res.code == 'D001') {
        this.$toast('修改简介成功')
      }
    }
  }
}
</script>

<style>
</style>